<template>
  <el-row class="mt-6">
    <el-col style="height: 56px;line-height: 56px">
      <div class="float-left font-extralight" style="font-size: 22px">手机</div>
      <div class="float-right " style="font-size: 16px">查看更多</div>
    </el-col>
  </el-row>
  <div class="flex">
    <div>
      <img src="../assets/bar/1-1.webp">
    </div>
    <div class="myBg tags2 flex ml-4 flex-col justify-around">
      <div class="flex transition-all duration-500 flex-col items-center">
        <img src="../assets/bar/1-2.webp">
        <div class="title_first">Redmi Note 11 Pro系列</div>
        <div class="title_second">Redmi Note 11 Pro系列</div>
        <div class="price">1799起</div>
      </div>
      <div class="flex flex-col items-center">
        <img src="../assets/bar/1-2.webp">
        <div class="title_first">Redmi Note 11 Pro系列</div>
        <div class="title_second">Redmi Note 11 Pro系列</div>
        <div class="price">1799起</div>
      </div>
    </div>
    <div class="myBg tags2 flex ml-4 flex-col justify-around">
      <div class="flex transition-all duration-500 flex-col items-center">
        <img src="../assets/bar/1-2.webp">
        <div class="title_first">Redmi Note 11 Pro系列</div>
        <div class="title_second">Redmi Note 11 Pro系列</div>
        <div class="price">1799起</div>
      </div>
      <div class="flex flex-col items-center">
        <img src="../assets/bar/1-2.webp">
        <div class="title_first">Redmi Note 11 Pro系列</div>
        <div class="title_second">Redmi Note 11 Pro系列</div>
        <div class="price">1799起</div>
      </div>
    </div>
    <div class="myBg tags2 flex ml-4 flex-col justify-around">
      <div class="flex transition-all duration-500 flex-col items-center">
        <img src="../assets/bar/1-2.webp">
        <div class="title_first">Redmi Note 11 Pro系列</div>
        <div class="title_second">Redmi Note 11 Pro系列</div>
        <div class="price">1799起</div>
      </div>
      <div class="flex flex-col items-center">
        <img src="../assets/bar/1-2.webp">
        <div class="title_first">Redmi Note 11 Pro系列</div>
        <div class="title_second">Redmi Note 11 Pro系列</div>
        <div class="price">1799起</div>
      </div>
    </div>
    <div class="myBg tags2 flex ml-4 flex-col justify-around">
      <div class="flex transition-all duration-500 flex-col items-center">
        <img src="../assets/bar/1-2.webp">
        <div class="title_first">Redmi Note 11 Pro系列</div>
        <div class="title_second">Redmi Note 11 Pro系列</div>
        <div class="price">1799起</div>
      </div>
      <div class="flex flex-col items-center">
        <img src="../assets/bar/1-2.webp">
        <div class="title_first">Redmi Note 11 Pro系列</div>
        <div class="title_second">Redmi Note 11 Pro系列</div>
        <div class="price">1799起</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.tags2 .title_first{
  font-size: 14px;
  margin: 0 10px 2px;
  overflow: hidden;
}
.tags2 .title_second {
  font-size: 12px;
  margin: 0 10px 10px;
  color: #b0b0b0;
}
.tags2 .price {
  color: #ff6700;
  margin: 0 10px 14px;
}
.tags2 > div {
  padding: 20px 0;
}
.myBg>div {
  @apply bg-white
}
.myBg>div:hover {
  box-shadow: 0 10px 20px rgb(0 0 0 / 15%)
}
</style>